// 客户代号
<template>
	<page-meta :root-font-size="getRootFontSize()"></page-meta>
	<view style="position: fixed; width: 100%; height: 100%; background-color: #8AC0E4;">
		<view class="topBox">
			<view class="status_bar"></view>
			<uni-nav-bar
				style="width: 750rpx; height: 44px;"
				@clickRight="showSetUp"
				@clickLeft="goHome"
				color="#FDFDFD"
				:border="false"
				:shadow="false"
				background-color="transparent"
			>
				<!-- <view class="titleImg"><image style="width: 100%; height: 100%;" mode="scaleToFill" src="/static/icon/logo_ctw@3x.png"></image></view> -->
				<view slot="left">
					<view class="leftIconBox"><uni-icons type="arrowleft" color="#000" size="18"></uni-icons></view>
				</view>
				<view slot="right"><uni-icons type="bars" color="#FDFDFD" size="28"></uni-icons></view>
			</uni-nav-bar>
		</view>
		<image style="width: 100%; height: 100%;" src="/static/icon/superAnt/mapsImg.png" mode=""></image>
		<view class="zhuti" :style="{ marginTop: topBar }">
			<!-- 标题 -->
			<view class="titleBox">{{ i18n.ctwfont3 }}</view>
			<!-- 导出 -->
			<view class="detailsBoxTop" v-for="item in codeList" :key="item.id" @tap="onclick(item)" v-show="codeList.length >= 1">
				<view class="detailsBoxTopRBox" :style="{ backgroundColor: item.check ? '#038A15' : '#677BA1' }">{{ item.customerCode }}</view>
				<view class="detailsBoxTopImg">
					<image
						style="width: 100%; height: 100%;"
						mode="scaleToFill"
						:src="item.check ? '/static/icon/OneDrive_5_11-16-2021/2x/ic_id02@2x.png' : '/static/icon/OneDrive_5_11-16-2021/2x/ic_id01@2x.png'"
					></image>
				</view>
				<view class="detailsBoxTopTitleBig" :style="{ color: item.check ? '#424451' : '#898A92' }">
					<view class="detailsBoxTopTitleBigText">{{ item.customerCode }}</view>
					<view class="detailsBoxTopTitleBigText">{{ item.customerAddress }}</view>
					<view class="detailsBoxTopTitle">
						<view class="detailsBoxTopTitleL">{{ i18n.ctwfont2 }} : {{ item.customerMobile }}</view>
						<view style="opacity: 0;"></view>
						<!-- 				<view class="detailsBoxTopTitleR">
							<image
								style="width: 15px; height: 15px; vertical-align: middle; margin-right: 3px;"
								mode="scaleToFill"
								:src="item.check ? '/static/icon/OneDrive_5_11-16-2021/2x/ic_choice02@2x.png' : '/static/icon/OneDrive_5_11-16-2021/2x/ic_choice01@2x.png'"
							></image>
							{{ i18n.ctwfont1 }}
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<view class="bottomImgBoxMF">
			<image style="width: 100%; height: 100%;" src="/static/icon/superAnt/mapsImgMF.png" mode=""></image>
		</view>
		<view class="bottomImgBox">
			<image style="width: 100%; height: 100%;" src="/static/icon/superAnt/bg2-02.png" mode=""></image>
		</view>
		<!-- 设置 -->
		<uni-popup ref="SetUpPopup" type="center" :animation="false"><set-up-pages ref="showPopup" @closePopUp="closePopUp" /></uni-popup>
		<!-- 退出 -->
		<sign-out ref="signOutBox" />
	</view>
</template>

<script>
import setUpPages from '@/pages/setUpPages/index.vue';
import signOut from '@/pages/setUpPages/signOut.vue'; // 退出登录
import { getStorage } from '@/utils/setStorage.js';
import { codeMapFun } from '@/utils/codeMap.js';
import baseFont from '@/utils/baseFont.js';
export default {
	extends: baseFont,
	data: function() {
		return {
			topBarHeight: 0, // 导航栏高度
			back_k: 0,
			popupIsShow: false, // 打开设置的标识
			signOutShow: false, // 退出登录
			codeList: []
		};
	},
	onShow() {
		this.getList();
	},
	onLoad() {
		// 拦截物理返回键
		this.goBackBox();
	},
	onUnload() {
		uni.$off('goBack_k', this.goBackBox2);
	},
	created() {
		const that = this;
		uni.getSystemInfo({
			success(res) {
				that.topBarHeight = res.statusBarHeight;
			}
		});
	},
	onHide() {
		this.$refs.SetUpPopup.close();
		this.popupIsShow = false;
		this.$refs.signOutBox.close();
	},
	components: { setUpPages, signOut },
	computed: {
		topBar() {
			let num = 0;
			num = this.topBarHeight + 44; // 44是顶部高度
			return num + 'px';
		},
		i18n() {
			return this.$t('city');
		}
	},
	methods: {
		// 返回home
		goHome() {
			// #ifdef APP-PLUS
			uni.redirectTo({
				url: '/pages/home/index'
			});
			// #endif
			// #ifdef H5
			this.$Router.push('/pages/home/index');
			// #endif
		},
		goBackBox() {
			// const that = this;
			uni.$on('goBack_k', this.goBackBox2);
		},
		goBackBox2(data) {
			this.back_k < 0 ? (this.back_k = 0) : (this.back_k = this.back_k);
			if (data) {
				let main = plus.android.runtimeMainActivity();
				if (this.back_k > 0) {
					this.back_k = 0;
					return main.moveTaskToBack(false);
					// return plus.runtime.quit();
				} else {
					const pages = getCurrentPages();
					if (pages.length === 1) {
						this.back_k++;
						setTimeout(() => {
							this.back_k--;
						}, 1000);
						// #ifdef APP-PLUS
						// uni.switchTab({
						// 	url: '/pages/me/index'
						// });
						// // #endif
						// // #ifdef H5
						// this.$Router.push('/pages/me/index');
						// // #endif
						// uni.showToast({
						// 	title: '再按一次退出应用',
						// 	icon: 'none',
						// 	duration: 1000
						// });
					} else {
						uni.navigateBack({
							delta: 1
						});
					}
				}
			}
		},
		// 获取数据
		async getList() {
			const user = JSON.parse(getStorage('userconter'));
			const params = {
				customerCode: user.customerCode
			};
			const { data: res } = await this.$http(true, 'api/E3/shippingAddress', params, 'GET');
			if (res.errno === 0) {
				this.codeList = res.data;
				if (this.codeList.length > 0) {
					this.codeList.forEach(item => {
						if (item.customerCode === user.customerCode) {
							item.check = true;
						} else {
							item.check = false;
						}
					});
				}
			} else {
				const err = codeMapFun().find(item => item[res.errno]);
				if (err) {
					uni.showToast({
						title: err[res.errno],
						icon: 'none',
						position: 'top'
					});
				} else {
					uni.showToast({
						title: res.errmsg,
						icon: 'none',
						position: 'top'
					});
				}
			}
		},
		// 打开设置
		showSetUp() {
			this.$refs.SetUpPopup.open('right');
			this.popupIsShow = true;
		},
		// 关闭设置
		closePopUp(val) {
			if (val) {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
			} else {
				this.$refs.SetUpPopup.close();
				this.popupIsShow = false;
				this.$refs.signOutBox.open();
				this.signOutShow = true;
			}
		},
		onclick(item) {
			// this.codeList.forEach(val => {
			// 	if (val.customerCode === item.customerCode) {
			// 		val.check = true;
			// 	} else {
			// 		val.check = false;
			// 	}
			// });
			// const id = this.codeList.find(val.id === item.id)
			// id.check = true
		}
	}
};
</script>

<style lang="scss" scoped>
.titleImg {
	width: 60px;
	height: 30px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
}
.leftIconBox {
	width: 25px;
	height: 25px;
	background-color: #f2f2f2;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 15px;
}
.topBox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 10;
	// 顶部部分
	.status_bar {
		height: var(--status-bar-height);
		background-color: transparent;
		width: 100%;
	}
}
	
.bottomImgBox {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 200px;
}
	
.bottomImgBoxMF {
	position: absolute;
	left: 0;
	bottom: 200px;
	width: 100%;
	height: 100px;
}
.zhuti {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	padding: 0 15px;
	box-sizing: border-box;
	z-index: 1;
	.titleBox {
		text-align: center;
		font-size: 18px;
		color: #cf112a;
		margin-bottom: 80rpx;
	}
	.detailsBoxTop {
		position: relative;
		padding: 15px;
		box-sizing: border-box;
		border-radius: 5px;
		background-color: #ffffff;
		margin-bottom: 25px;
		overflow: hidden;
		box-shadow: 0 3px 5px 1px #e3e3e3;
		display: flex;
		align-items: center;
		.detailsBoxTopRBox {
			position: absolute;
			top: 0;
			right: 0;
			width: 85px;
			text-align: center;
			height: 25px;
			line-height: 25px;
			background-color: #038a15;
			color: #fff;
			font-size: $uni-font-size-custom-d;
		}
		.detailsBoxTopImg {
			width: 50px;
			height: 40px;
			margin-right: 15px;
		}
		.detailsBoxTopTitleBig {
			flex: 1;
			.detailsBoxTopTitleBigText {
				font-size: $uni-font-size-custom-d;
				color: #424451;
				line-height: 18px;
			}
			.detailsBoxTopTitle {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 10px;
				.detailsBoxTopTitleL {
					font-size: $uni-font-size-custom-d;
					color: #424451;
				}
				.detailsBoxTopTitleR {
					font-size: $uni-font-size-custom-d;
					color: #424451;
				}
			}
		}
	}
}
</style>
